<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件绑定</title>
	</head>
	<body>
		<div id="app">
			<!-- 需求:实现数据自增操作
				 事件绑定 v-on
				 1语法: v-on:click="函数/直接计算"
				 2简化语法 v-on: 可以简化为@
			 -->
			<h3>数值: {{num}}</h3>
			
			<button v-on:click="num++">自增</button>
			<button @click="num++">自增简化</button>
			<button @click="addNum">计算</button>
			<button @keypress="addNum">快速自增</button>
			<button @keypress="unNum">快速自减</button>
			<button @keyup="unNum">快速自减</button>
			<button @keydown="unNum">快速自减</button>
			
		</div>
		<!-- 1.导入JS文件 -->
		<script src="../js/vue.js"></script>
		
		<!-- 3.创建VUE对象 -->
		<script>
		// 创建对象
			const APP = new Vue({
				el: "#app",
				// 定义属性
				data: {
					num: 100,
					},
					methods: {
						addNum :function(){
							this.num++
						},
					unNum(){
						this.num--
					}
					
				}
			})
		</script>	
	</body>
</html>
